<template>
  <div class="app-container">

    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="queryForm.keywords" placeholder="请输入关键字" style="width: 18.75rem;" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search"  size="mini" :loading="loading" @click="onQuerySubmit">查询</el-button>
        <el-button type="info" icon="el-icon-refresh"  size="mini" :loading="loading" @click="onReset">重置</el-button>
        <el-button type="success" icon="el-icon-plus"  size="mini" :loading="loading" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <div class="icons-container">
      <div class="grid">
          <el-popover v-for="item in  tableData"
            placement="right"
            trigger="click">
            <el-row>
              <el-button type="success" plain  @click="handleEdit(item)">编辑</el-button>
              <el-button type="danger" plain   @click="handleDelete(item)">删除</el-button>
            </el-row>
            <el-button slot="reference" style="border:none;">
              <el-image
                style="width: 7rem; height:7rem"
                :src="(fileUrl+item.icon)"
                fit="fill"></el-image>
                <p> {{ item.name }}</p>
            </el-button>
          </el-popover>

      </div>
    </div>

    <el-row>
      <el-col :span="24">
        <div align="right" style="margin-top: 0.3125rem;">
          <el-pagination background layout="prev, pager, next" :current-page="page.cur" :page-size="page.limit" :total="page.total" @current-change="handleCurrentChange" />
        </div>
      </el-col>
    </el-row>

    <!--编辑框-->
    <info-dialog
      v-if="editDialog.visible"
      :properties="editDialog"
      @closed="close"
      @refresh="load"
    />

  </div>
</template>

<script>
import {
  findStylePoiList,
  deleteStylePOI,
  getStylePOIImg
} from '@/api/51world/stylePoi.js'

import defaultSettings from '@/settings'

import {
  settingSceneSrcStyle
} from '@/api/51world/sceneSrc.js'



import {
  isOk
} from '@/utils/request'

import InfoDialog from './components/InfoDialog.vue'


export default {
  name: 'PoiStyle',
  components: {
    InfoDialog
  },
  data() {
    return {
      visible: false,
      title: '',
      loading:false,
      queryForm:{
        keywords:'',
      },
      page: {
        cur: 1,
        limit: 10,
        total: 0
      },
      editDialog: {
        visible: false,
        type: '0',
        data: {}
      },
      tableData: [],
      fileUrl:defaultSettings.localFileProxy
    }
  },
  computed: {
  },
  mounted: function() {
  },
  created() {
    this.load();
  },
  methods: {
    indexMethod(index) {
      return index +1;
    },
    onQuerySubmit(event) {
      this.load()
    },
    onReset(event) {
      this.queryForm.keywords='';
      this.load()
    },
    load(){
      this.loading=true
      findStylePoiList({
        cur: this.page.cur,
        limit: this.page.limit,
        keywords: this.queryForm.keywords,
      }).then(rsp => {
        if(200==rsp.code){
          const _data = rsp.data.list
          this.page.total = rsp.data.totalRow
          this.tableData = _data
          this.loading = false
        }
      }).catch(err => {
        console.log(err);
      })
      .finally(() => {
        this.loading = false
      })
    },
    getStylePOIImg(param){
      console.log(param);
      getStylePOIImg(param).then(rsp => {
        console.log(rsp)
      }).catch(err => {
        console.log(err);
      })
      .finally(() => {
      })
    },
    handleCurrentChange(cur) {
      this.page.cur = cur
      this.load()
    },
    handleAdd: function(e) {
      this.editDialog.visible = true
      this.editDialog.data = {}
    },
    handleEdit: function(data) {
      console.log(data)
      this.editDialog.visible = true
      this.editDialog.data = data
    },
    handleDelete: function(data) {
      this.$confirm('确认删除【' + data.name + '】吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        deleteStylePOI({
          id: data.id
        }).then(response => {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 500
          })
          this.load()
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      })
    },
    close: function(e) {
      this.editDialog.visible = false
      this.editDialog.data = {}
      this.load()
    },
  }
}
</script>

<style lang="scss" scoped>
.icons-container {
  margin: 0;
  overflow: hidden;

  .grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .icon-item {
    margin: 20px;
    height: 8.4375rem;
    text-align: center;
    width: 7rem;
    float: left;
    font-size: 30px;
    color: #24292e;
    cursor: pointer;
  }

  span {
    display: block;
    font-size: 16px;
    margin-top: 10px;
  }

  .disabled {
    pointer-events: none;
  }
}
</style>
